Tengo mi DOM así:
<input type="number" id="input" value="" placeholder="Enter time in minutes"> <button id="button">Go</button> <button id="reset">reset</button> <div class="timer"> <div class="mint" id="mint"></div> <div class="sec" id="sec"></div> </div>Y mi JavaScript me gusta esto:
let currentTime = 0; let intervalClear; let input = document.getElementById('input'); let button = document.getElementById('button') button.addEventListener('click', ()=>{ let value = input.value * 60000; function getTime(){ currentTime++ function backcount(currentTime){ let output = value - currentTime console.log(output); const mint = document.getElementById('mint'), sec = document.getElementById('sec'); let minute = Math.floor(output/60000) let second = ((output % 60000) / 1000).toFixed(0) mint.innerText = minute; sec.innerText = second; if(output == 0){ clearInterval(intervalClear) } } backcount(currentTime); } getTime() intervalClear = setInterval(getTime, 1000) }) const reset = document.getElementById('reset') reset.addEventListener('click', ()=>{ clearInterval(intervalClear); input.value = ''; })ahora quiero mostrar valor en mi página web pero no se actualiza. parece que se congela. pero mi "setInterval()" funciona correctamente.
¿Cómo puedo resolver este problema? ¡necesitas ayuda!
Necesitas en lugar de este código
let output = value - currentTimeutilizar este
let output = value - (currentTime * 1000) let currentTime = 0; let intervalClear; let input = document.getElementById('input'); let button = document.getElementById('button') button.addEventListener('click', ()=>{ let value = input.value * 60000; function getTime(){ currentTime++ function backcount(currentTime){ let output = value - (currentTime * 1000) console.log(output); const mint = document.getElementById('mint'), sec = document.getElementById('sec'); let minute = Math.floor(output/60000) let second = ((output % 60000) / 1000).toFixed(0) mint.innerText = minute; sec.innerText = second; if(output == 0){ clearInterval(intervalClear) } } backcount(currentTime); } getTime() intervalClear = setInterval(getTime, 1000) }) const reset = document.getElementById('reset') reset.addEventListener('click', ()=>{ clearInterval(intervalClear); input.value = ''; }) <input type="number" id="input" value="" placeholder="Enter time in minutes"> <button id="button">Go</button> <button id="reset">reset</button> <div class="timer"> <div class="mint" id="mint"></div> <div class="sec" id="sec"></div> </div>Según la respuesta de @ Oleg Barabanov, encontré un error. Si no ingresó ningún valor en el cuadro de texto o el primer valor agregado, haga clic en "Restablecer" y haga clic en el botón "Ir", luego el contador comenzó con un valor negativo. Solucioné ese problema con este código.
Guion
var intervalClear; var input = document.querySelector('#input'); var mint = document.querySelector('#mint'); var sec = document.querySelector('#sec'); var go_button = document.querySelector('#button'); var reset_button = document.querySelector('#reset'); go_button?.addEventListener('click', () => { if (input.value != '' && input.value != 0 && parseInt(input.value) != NaN) { startTimer(input.value, mint, sec); } }); reset_button?.addEventListener('click', () => { clearInterval(intervalClear); mint.textContent = '00'; sec.textContent = '00'; }); function startTimer(duration, minElement, secElement) { clearInterval(intervalClear); var timer = duration * 60, minutes, seconds; intervalClear = setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; minElement.textContent = minutes; secElement.textContent = seconds; if (--timer < 0) { timer = duration; } if (minutes == 0 && seconds == 0) { clearInterval(intervalClear); mint.textContent = '00'; sec.textContent = '00'; } }, 1000); }DOM
<input type="number" id="input" placeholder="Enter time in minutes" > <button id="button">Go</button> <button id="reset">reset</button> <div class="timer"> <div class="mint" id="mint">00</div> <div class="sec" id="sec">00</div> </div>